<template>
  <el-dialog
    :title="$t('add.add132')"
    :visible.sync="dialogTableVisible"
    width="600"
    @close="close"
    :close-on-click-modal="false"
  >
    <div class="patientDetail">
      <div class="detail-list">
        <div class="d-item">
          <div>{{ $t('add.add126') }}</div>
          <div>{{ form.workNo || '-' }}</div>
        </div>
        <div class="d-item">
          <div>{{ $t('add.add117') }}</div>
          <div>{{ form.workOrderType || '-' }}</div>
        </div>
        <div class="d-item">
          <div>{{ $t('add.add089') }}</div>
          <div>{{ form.content || '-' }}</div>
        </div>
        <div class="d-item">
          <div>{{ $t('add.add135') }}/{{ $t('add.add129') }}</div>
          <div>{{ form.updaterName || '-' }}/{{ form.updateDate || '-' }}</div>
        </div>
        <div class="d-item">
          <div>{{ $t('add.add130') }}</div>
          <div>{{ form.statusName || '-' }}</div>
        </div>
        <div class="d-item">
          <div>{{ $t('add.add133') }}</div>
          <div>{{ form.creatorName || '-' }}</div>
        </div>
        <div class="d-item">
          <div>{{ $t('add.add134') }}</div>
          <div>{{ form.createDate || '-' }}</div>
        </div>
        <div class="d-item">
          <div>{{ $t('members.chengyuan5') }}</div>
          <div>{{ form.deptName || '-' }}</div>
        </div>
        <div class="d-item">
          <div>{{ $t('add.add090') }}</div>
          <div>{{ form.statusName || '-' }}</div>
        </div>
        <div class="d-item">
          <div>{{ $t('add.add137') }}</div>
          <div>{{ form.engineer || '-' }}</div>
        </div>
        <div class="d-item">
          <div>{{ $t('add.add091') }}</div>
          <div>{{ form.feedback || '-' }}</div>
        </div>
        <div class="d-item">
          <div class="name">{{ $t('add.add138') }}</div>
          <div class="fujian">
            <div v-for="(item, index) in form.fileList" :key="index" class="item">
              <div class="file-name">{{ item.fileName }}</div>
              <div class="text" @click="download(item.url, item.fileName)">
                <span v-if="isAssetTypeAnImage(item.url)">{{ $t('add.add045') }}</span>
                <img v-else src="@/assets/img/file_download.png" alt="" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button plain :size="optionButtonSize" @click="dialogTableVisible = false"
          >{{ $t('add.add092') }}</el-button
        >
      </span>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'ZsDetail',

  data() {
    return {
      form: {},
      dialogTableVisible: false,
    };
  },

  mounted() {},

  methods: {
    isAssetTypeAnImage(url) {
      const ext = url.substr(url.lastIndexOf('.') + 1);
      return (
        ['png', 'jpg', 'jpeg', 'bmp', 'gif', 'webp', 'psd', 'svg', 'tiff'].indexOf(
          ext.toLowerCase(),
        ) !== -1
      );
    },
    download(url, name) {
      window.open(url);
      // window.location.href = url
    },
    close() {
      this.dialogTableVisible = false;
      this.form = {};
    },
  },
};
</script>

<style lang="scss" scoped>
.patientDetail {
  padding: 0 30px;
  box-sizing: border-box;
  margin-bottom: 30px;

  .detail-list {
    .d-item {
      display: flex;

      div {
        width: 230px;
        margin-bottom: 8px;
      }

      div:first-child {
        font-weight: 500;
      }

      .fujian {
        // width: 400px;
        // display: flex;
        // flex-direction: column;

        .item {
          width: 400px;
          height: 26px;
          display: flex;
          justify-content: space-between;

          .file-name {
            margin-right: 20px;
          }

          .text {
            color: #1a73e9;
            cursor: pointer;

            img {
              width: 16px;
              height: 16px;
            }
          }
        }
      }
    }
  }
}

.dialog-footer {
  float: right;
}
</style>
